<template>
    <div>
        <van-cell-group v-for="(item,index) in li" :key="index">
            <div class="con" @dblclick="chan(item,index)">
                <p v-show="!fel" >{{item}}</p>
                <input type="text" v-show="fel" v-model="value" @keydown.enter="change(index)"
                    @keydown.esc="esc">
                <button @click="del(index)" class="btn">删除</button>
            </div>
        </van-cell-group>
    </div>
</template>

<script>
    export default {
        props: ['li'],
        data() {
            return {
                arr: [],
                value: '',
                fel: false,
                index: 0
            }
        },

        methods: {
            chan(item, i) {
                // this.index = i
                // console.log(this.index)
                this.fel = !this.fel
                this.value = item
            },
            change(i) {
                console.log(i)
                this.fel = !this.fel
                this.li.splice(i, 1, this.value)
            },
            esc() {
                this.fel = !this.fel
                this.value = this.li
            },
            del(i){
                this.li.splice(i,1)
            }

        }
    }
</script>

<style lang='scss' scoped>
.con{
    display: flex;
    justify-content: space-between;
    .btn{
        height: 70%;
    }
}

</style>